<template>
    <div class="registerThree">
        <div class="moduleHead">
            <router-link :to="{ name: 'registerTwo' }">
                <span class="back"></span>
            </router-link>
            <span>{{language.unify_welcome}}</span>
        </div>
        <div class="body">
            <div class="line_input_box">
                <input name="username" :class="{has_val : username, 'validate-error-border': hasValidateError('username')}" v-validate="'username|min|max'" v-model="username" @focus="focusInput" @input="updateInput" @blur="checkUsername" maxlength=16 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text">
                <label :class="{'validate-error-color': hasValidateError('username')}"><span v-if="hasValidateError('username')">{{getValidateError('username')}}</span><span v-else>{{language.unify_username}}</span></label>
                <i v-show="activeClearBtn == 'username'" @click="clearValue('username')" class="icon_close"></i>
            </div>
            <div class="line_input_box">
                <input name="email" :class="{has_val : email, 'validate-error-border': hasValidateError('email')}" v-validate="'email'" v-model="email" @focus="focusInput" @input="updateInput" @blur="checkEmail" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text">
                <label :class="{'validate-error-color': hasValidateError('email')}"><span v-if="hasValidateError('email')">{{getValidateError('email')}}</span><span v-else>{{language.unify_email}}</span></label>
                <i v-show="activeClearBtn == 'email'" @click="clearValue('email')" class="icon_close"></i>
            </div>
            <div class="line_input_box">
                <input name="password" :class="{has_val : password, 'validate-error-border': hasValidateError('password')}" v-validate="'min|max'" v-model="password" @focus="focusInput" @input="updateInput" @blur="checkPassword" maxlength=16 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="new-password" type="password">
                <label :class="{'validate-error-color': hasValidateError('password')}"><span v-if="hasValidateError('password')">{{getValidateError('password')}}</span><span v-else>{{language.unify_password}}</span></label>
                <i v-show="activeClearBtn == 'password'" @click="clearValue('password')" class="icon_close"></i>
            </div>
            <div class="serviceAgr_warapper">
                <label @click="checked = !checked">
                    <span class="serviceAgreement"><i v-show="checked" >✔</i></span> By continuing, I confirm I have reviewed and agree to the
                    <router-link :to="{ name: 'serviceAgreement' }">
                        Service Agreement
                    </router-link>and the
                    <router-link :to="{ name: 'privacyPolicy' }">
                        Privacy Policy.
                    </router-link>
                </label>
            </div>
            <div class="button_warapper">
                <!-- <router-link :to="{ name: 'login' }"> -->
                <button class="btn btn_nextStep" @click="register()" :class="{opacity: !opacity}">
                    <loading :props="{show:loading,type:'btn'}"></loading>
                    {{language.unify_done}}
                </button>
                <!-- <button class="btn btn_nextStep btn_disabled"> Continue </button> -->
                <!-- </router-link> -->
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import * as API from '../api';
import permissionPartMixin from '../common/permissionPartMixin'
import validationMixin from '../plugins/my-validate'
import loading from './Loading'

export default {
    name: 'registerThree',

    mixins: [permissionPartMixin, validationMixin],

    components: {
        loading
    },

    data() {
        return {
            username: '',
            email: '',
            password: '',
            loading: false,
            checked: false,
            opacity: false,
            activeClearBtn: '',
        }
    },

    beforeUpdate() {
        this.opacity = this.checkRegAll();
    },

    activated() {
        this.setShowError(false);
    },

    methods: {

        focusInput(e) {
            if (_.trim(e.target.value).length > 0) {
                this.activeClearBtn = e.target.name;
            } else {
                this.activeClearBtn = '';
            }
        },

        updateInput(e) {
            if (_.trim(e.target.value).length > 0) {
                this.activeClearBtn = e.target.name;
            } else {
                this.activeClearBtn = '';
            }
            this.changeField(e.target.name, 'showError', false);
        },

        checkUsername(e) {
            let tthis = this;
            setTimeout(function() {
                if (tthis.username) {
                    API.check_username({
                        data: {
                            username: tthis.username
                        },
                        success: function(result) {
                            if (result.errcode) {
                                tthis.changeField(e.target.name, 'showError', true);
                                tthis.changeTopTips('username', result.errmsg);
                            }
                        }
                    });
                } else {
                    tthis.clearValue('username');
                }
            }, 50);
        },

        clearValue(key) {
            this[key] = '';
            this.clearElNameValue(key);
            this.$forceUpdate();
        },

        checkEmail(e) {
            let tthis = this;
            setTimeout(function() {
                if (tthis.email) {
                    API.check_email({
                        data: {
                            email: tthis.email
                        },
                        success: function(result) {
                            if (result.errcode) {
                                tthis.changeField(e.target.name, 'showError', true);
                                tthis.changeTopTips('email', result.errmsg);
                            }
                        }
                    });
                } else {
                    tthis.clearValue('email');
                }
            }, 50);
        },

        changeTopTips(name, errmsg) {
            let obj = {
                errorCode: 2, //0是初始化 1是通过， 2是错误
                errormsg: errmsg, //错误文本
            };
            this.changeCacheFields(name, obj);
            this.$forceUpdate();
        },

        setShowError: function(val) {
            this.changeField('username', 'showError', val);
            this.changeField('email', 'showError', val);
            this.changeField('password', 'showError', val);
        },

        checkPassword(e) {
            let tthis = this;
            setTimeout(function() {
                if (tthis.password) {
                    tthis.$forceUpdate();
                } else {
                    tthis.clearValue('password');
                }
            }, 50);
        },

        checkRegAll() {
            let bool = false;
            if (this.checkCacheAll() && this.checked) {
                bool = true;
            }
            return bool;
        },

        register() {
            let tthis = this;
            this.setShowError(true);
            if (this.checkRegAll() && !this.loading) {
                this.loading = true;
                let obj = {},
                    regData = JSON.parse(Unit.getSessionStorage('ms_register_data'));
                regData.username = this.username;
                regData.email = this.email;
                regData.password = this.password;
                // regData.facebook = this.facebook;
                regData.match_age_min = 18;
                regData.match_age_max = 99;
                obj.data = regData;

                obj.callback = function(result) {
                    if (result.account) {
                        tthis.permissionPartMixin_LoginSuccessful(result);
                        Unit.removeSessionStoreage('ms_register_data');
                    } else {
                        if (typeof(result.errs) != 'undefined') {
                            switch (result.errs[0].errcode) {
                                case 10:
                                case 112:
                                    tthis.changeTopTips('username', result.errs[0].errmsg);
                                    break;
                                case 25:
                                    // tthis.changeTopTips('access', result.errs[0].errmsg);
                                    tthis.changeTopTips('username', result.errs[0].errmsg);
                                    break;
                                case 'ALREADY_EXITS':
                                case 2:
                                case 120:
                                    tthis.changeTopTips('email', result.errs[0].errmsg);
                                    break;
                                default:
                                    //tthis.changeTopTips('unknown', result.errs[0].errmsg);
                                    tthis.changeTopTips('username', result.errs[0].errmsg);
                            }
                        } else {
                            // tthis.changeTopTips('unknown', result.errmsg);
                            tthis.changeTopTips('username', result.errmsg);
                        }
                    }
                };

                obj.complete = function() {
                    tthis.loading = false;
                }

                this.$store.dispatch('user_register', obj);
            }
        }
    }
}

</script>
<style scoped>
.registerThree {
    padding-top: 44px;
    background-color: #f7f7f7;
}

.registerThree .icon_close {
    z-index: 2;
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 30px;
    height: 30px;
    background: url(./../assets/icoClose.png) center no-repeat;
    background-size: 16px;
}

.registerThree .body {
    padding: 0 20px;
}

.registerThree .line_input_box {
    font-size: 15px;
    position: relative;
    height: 68px;
    color: #646464;
    margin-top: 1px;
}

.registerThree .line_input_box label {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 5px;
    color: #555;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}




















































































































































/*.registerThree .line_input_box input:-webkit-autofill + label,*/

.registerThree .line_input_box input.has_val+label,
.registerThree .line_input_box input:focus+label {
    color: #888;
    transform: scale(.9, .9) translate(-5.6%, -28px);
    -moz-transform: scale(.9, .9) translate(-5.6%, -28px);
    -webkit-transform: scale(.9, .9) translate(-5.6%, -28px);
}




















































































































































/*.registerThree input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
    border-bottom: 1px solid #e8e7e9;
}*/


/*.registerThree .line_input_box input:-webkit-autofill + label + .icon_close {
    display: none;
}

.registerThree input:-webkit-autofill + label {
    z-index: 2;
}*/

.registerThree .line_input_box input {
    z-index: 1;
    position: absolute;
    background: none;
    font-size: 15px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    padding-top: 36px;
    padding-bottom: 0;
    padding-right: 36px;
    border-radius: 0;
    border-bottom: 1px solid #e8e7e9;
    transition: border 1s;
    -moz-transition: border 1s;
    -webkit-transition: border 1s;
}

.registerThree .line_input_box input:focus {
    border-bottom-color: #999;
}

.registerThree .serviceAgr_warapper {
    margin-top: 28px;
    margin-bottom: 20px;
    position: relative;
    line-height: 18px;
    font-size: 12px;
    color: #a5a9ac;
}

.registerThree .serviceAgreement {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 3px;
    margin-top: -1px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    background: none;
}

.registerThree .serviceAgr_warapper a {
    color: #333;
}

.registerThree .button_warapper {
    padding: 44px;
    text-align: center;
}

.registerThree .button_warapper .btn_nextStep {
    width: 80%;
}

.registerThree .button_warapper .btn_disabled {
    background: #a5a5a5;
}

.registerThree .opacity {
    background: #a5a5a5;
}

</style>
